<template>
	<div class="race-prize-user-index">
		<div style="margin-bottom: 20px;">
			<el-button type="primary" size="medium" @click="go2ExportExcel">导出</el-button>
		</div>
		<div class="table-content-wrapper">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="name" label="用户名称" align="center" header-align="center" />
				<el-table-column prop="mobilePhone" label="手机号码" align="center" header-align="center" />
				<el-table-column prop="advisorName" label="指导老师" align="center" header-align="center" />
				<el-table-column prop="advisorPhone" label="指导老师电话" align="center" header-align="center" />
				<el-table-column prop="organizationName" label="所属机构" align="center" header-align="center" />
			</el-table>
			<el-pagination style="margin-top: 15px;text-align: right;" :current-page="page.page_no"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="page.page_size"
				layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
	</div>
</template>

<script>
	import xlsx from 'xlsx';
	import {
		queryPrizeUserInfo
	} from '@/api/meiyu/racePrize.js'

	export default {
		props: {
			raceId: {
				type: Number,
				default: undefined
			},
			prizeId: {
				type: Number,
				default: undefined
			},
			prizeName: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				key: '',
				tableData: [],
				dialogVisible: false,
				dialogTitle: '提示',
				page: {
					page_no: 1,
					page_size: 10,
					total: 0
				},
				currentSelect: {}
			}
		},
		mounted() {
			this.go2Query()
		},
		methods: {
			handleSizeChange(val) {
				this.page.page_size = val
				this.go2Query()
			},
			handleCurrentChange(val) {
				this.page.page_no = val
				this.go2Query()
			},
			go2Query() {
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				const params = {
					page_no: this.page.page_no,
					page_size: this.page.page_size,
					race_id: this.raceId,
					prize_id: this.prizeId
				}
				queryPrizeUserInfo(params).then((res) => {
					loading.close()
					if (res.code === 200) {
						const message = res.data
						this.tableData = message.items
						this.page.total = message.total
					}
				}).catch((error) => {
					loading.close()
					console.log(error)
				})
			},
			handleClose() {
				this.dialogVisible = false
			},
			go2Close() {
				this.dialogVisible = false
				this.go2Query()
			},
			go2ExportExcel(){
				const loading = this.$loading({
					lock: true,
					text: '导出中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				const params = {
					page_no: 1,
					page_size: 10000000,
					race_id: this.raceId,
					prize_id: this.prizeId
				}
				queryPrizeUserInfo(params).then((res) => {
					loading.close()
					if (res.code === 200) {
						const message = res.data
						this.tableData = message.items
						this.go2Export(message.items)
					}
				}).catch((error) => {
					loading.close()
					console.log(error)
				})
			},
			go2Export(rowData) {
				const header = ["用户名称", "手机号码", "指导老师", "指导老师电话", "所属机构"]
				var datas = rowData.map(i => {
					return [
						i.name,
						i.mobilePhone,
						i.advisorName,
						i.advisorPhone,
						i.organizationName
					]
				})
				const data = [header].concat(datas)
				const sheet = xlsx.utils.aoa_to_sheet(data)
				sheet['!cols'] = [{
					wpx: 80
				}, {
					wpx: 60
				}, {
					wpx: 60
				}, {
					wpx: 80
				}, {
					wpx: 120
				}];
				const workbook = xlsx.utils.book_new();// 创建虚拟的 workbook
				xlsx.utils.book_append_sheet(workbook, sheet); // 向 workbook 中添加 sheet
				xlsx.writeFile(workbook, this.prizeName + '获奖用户名单.xlsx'); // 导出 workbook
			}
		}
	}
</script>

<style lang="scss">
	.race-prize-user-index {
		padding: 10px;

		.top-search-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.table-content-wrapper {
			// margin-top: 15px;
		}

		.el-divider--horizontal {
			margin: 15px 0;
		}

	}
</style>